import React, { useCallback } from 'react'
import { View, Text } from '@tarojs/components'
import VideoImageCard from '@COMPONENTS/Video/VideoImageCard'
import style from './HomeVideoCard.module.scss'

export default function HomeVideoCard({ data = {}, onClick, language, playClass = '', coverImageClass = '', containerClass = '' }) {
  const {
    Title, p8Id, PreviewFileName, Files = []
  } = data
  const onClickCard = useCallback(() => {
    onClick?.(p8Id)
  }, [p8Id, onClick])
  const { Length = 0 } = Files[0] || {}
  return (
    <View className={style.homeVideoCard} onClick={onClickCard}>
      <VideoImageCard
        fileName={PreviewFileName}
        length={Length}
        playClass={playClass || style.playClass}
        coverImageClass={coverImageClass || style.coverImageClass}
        containerClass={containerClass || style.containerClass}
      />
      <View className={style.videoTitleContainer}>
        <Text className={style.videoTitle}>{Title?.[language]}</Text>
      </View>
    </View>
  )
}
